<template>
  <div class="policy">
    <h1>这是政策法规管理平台</h1>
    <div class="formInline">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="search" placeholder="请输入政策文件名称">
            <template #prefix>
              <i class="custom-icon"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="onSubmit">新增</el-button>
        <el-button type="primary" @click="onSubmit">导出</el-button>
      </div>
    </div>
    <el-table
        ref="multipleTable"
        :data="filterTableData"
        style="width: 100%; height: 300px"
    >
      <el-table-column type="selection" width='50px'></el-table-column>
      <el-table-column label="文件上传日期" width='250px'>
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer />
            </el-icon>
            <span style="margin-left: 10px">
              {{ scope.row.date }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column property="name" label="政策文件名称" width='150px'></el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <el-button type="primary" @click="onEdit(scope.row)">修改</el-button>
          <el-button type="primary" @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    const formInline = reactive({
      user: '',
      region: ''
    });

    const tableData = ref([
      { date: '2016-05-03', name: 'Tom' },
      { date: '2016-05-02', name: 'Tom' },
      { date: '2016-05-04', name: 'Tom' },
      { date: '2016-05-01', name: 'Tom' },
      { date: '2016-05-08', name: 'Tom' },
      { date: '2016-05-06', name: 'Tom' },
      { date: '2016-05-07', name: 'Tom'}
    ]);

    const search = ref('');

    const filterTableData = computed(() => {
      if (!Array.isArray(tableData.value)) {
        return [];
      }
      return tableData.value.filter(
          (data) =>
              !search.value ||
              data.name.toLowerCase().includes(search.value.toLowerCase())
      );
    });

    const onSubmit = () => {
      console.log('提交成功');
    };

    const onEdit = (row) => {
      console.log('编辑:', row);
    };

    const onDelete = (row) => {
      console.log('删除:', row);
    };

    return {
      tableData,
      filterTableData,
      search,
      onSubmit,
      formInline,
      onEdit,
      onDelete
    };
  }
}
</script>

<style scoped>
.formInline {
  display: flex;
}
</style>